@use "sass:math";
@import "../css/variables";

.card-content {
  border: 1px solid $gray-300;
  border-radius: $border-radius;
  padding: $spacer * 1.5 $spacer * 1.5 $spacer * 2 $spacer * 1.5;
  cursor: pointer;
  transition: $button-border-color-transition;
  height: 100%;

  h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: $primary;

    .card-content-icon :global(svg) {
      height: $spacer * 2;
      width: $spacer * 2;
      margin-bottom: 4px;
      margin-right: math.div($spacer, 2);
    }
  }
}

a.card-link {
  color: $gray-800;
  text-decoration: none;

  &:hover .card-content {
    border-color: $primary;
  }
}
